revision:
The property returns the left position (in pixels) relative to the parent. The returned value includes: the left position, and margin of the element; the left padding, scrollbar and border of the parent.
The property is read-only.
Syntax:
element.offsetLeft : the left position of the element, in pixels.
property value:
none:
example
The offsetLeft of "DIV" is:
<div>
<div id="DIV">
<p>The offsetLeft of "DIV" is: <span id="prop"></span></p>
</div>
</div>
<style>
#DIV{left: 50px; margin: 10px; padding: 10px; width: 200px; position: relative;
border: 1px solid black}
</style>
<script>
const element = document.getElementById("DIV");
document.getElementById("prop").innerHTML = element.offsetLeft;
</script>
The offset values of "DIV2" are:
<div id="DIV2">
<p>The offset values of "DIV2" are:</p>
<p id="prop1"></p>
</div>
<style>
#DIV2{top: 0px; left: 50px; margin: 10px; padding: 10px; width: 300px; position: relative;
border: 1px solid black}
</style>
<script>
const element1 = document.getElementById("DIV2");
let text = "Left: " + element1.offsetLeft + "<br>Top: " + element1.offsetTop;
document.getElementById("prop1").innerHTML = text;
</script>